<template>
    <div class="tree_icon">
        <el-icon style="float: right" @click="handleCloseHospitalClick">
            <close />
        </el-icon>
    </div>
    <br /><br />
    <div style="text-align: center">
        <el-input v-model="compState.filterText" :placeholder="placeholderFormatFun()"
            style="width: 90%; margin-bottom: 10px" :prefix-icon="Search" />
    </div>
    <el-scrollbar height="390px">
        <el-tree ref="treeRef" class="filter-tree" :data="compState.hospitalTreeRemote" @node-click="handleHospNodeClick"
            :filter-node-method="filterNode" :props="defaultProps" default-expand-all>
        </el-tree>
    </el-scrollbar>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { setupMapState } from '../../../store/utils/hook'
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits(['closeHospitalEmit', "hospitalNodeEmit"])
const treeRef = ref()
const compState = reactive({
    filterText: "",
})
const defaultProps = {
    children: 'children', label: 'name'
}
const { hospitalTreeRemoteVx } = setupMapState("HospVenuAmbuModule", ["hospitalTreeRemoteVx"])
// 监听输入框
watch(() => compState.filterText, (newV) => {
    // console.log(newV)
    treeRef.value.filter(newV)
})
// 过滤节点数据
const filterNode = (value, data) => {
    // console.log(value, data)
    if (!value) return true;
    return data.name.includes(value);
};
const placeholderFormatFun = () => {
    let placeholder = "医院搜索"
    return placeholder
}
const handleHospNodeClick = (node) => {
    // console.log(node)
    emit("hospitalNodeEmit", node)
}
const handleCloseHospitalClick = () => {
    compState.filterText = ""
    emit('closeHospitalEmit')
}

onMounted(() => {
    compState.hospitalTreeRemote = hospitalTreeRemoteVx.value
})
</script>

<style scoped>
.online-status-clas {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.tree_icon {
    margin: 5px;
}

.tree_icon:hover {
    color: #758bfd;
    cursor: pointer;
}
</style>